<template>
  <div class='xtx-city' v-clickoutside="handlerClose">
    <div class="curr-wrapper" @click="toggleMenu" :class="{bg:open}">
      <span class="selected" v-if="selectedText">{{selectedText}}</span>
      <span class="ph" v-else>{{ph}}</span>
      <i class="iconfont" :class="[icon,open?'up':'']"></i>
    </div>
    <div class="city-wrapper" v-show="open">
      <span class="item" v-for="item in list" :key="item.code" @click="change(item)">{{item.name}}</span>
    </div>
  </div>
</template>
<style scoped lang="less">
.xtx-city {
  min-width: 150px;
  height: 28px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  .curr-wrapper {
    width: 100%;
    line-height: 26px;
    height: 100%;
    border: 1px solid #e4e4e4;
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
    overflow: hidden;
    &.bg {
      background: #fff;
    }
    .ph {
      color: #ccc;
    }
    .selected {
      padding-right: 5px;
      color: #999;
    }
    .iconfont {
      transition: all 0.5s;
      color: #ccc;
      &.up {
        transform: rotate(-180deg);
      }
    }
  }
  .city-wrapper {
    z-index: 9;
    position: absolute;
    left: 0;
    bottom: 1px;
    transform: translateY(100%);
    width: 522px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #e4e4e4;
    background: #fff;
    .item {
      text-align: center;
      line-height: 30px;
      width: 125px;
      padding: 0 5px;
      overflow: hidden;
      height: 30px;
      cursor: pointer;
      &:hover {
        color: @xtxColor;
      }
    }
  }
}
</style>
<script>
export default {
  name: 'xtx-city',
  props: {
    ph: {
      type: String,
      default: '请选择'
    },
    level: {
      type: Number,
      default: 2
    },
    icon: {
      type: String,
      default: 'icon-angle-down'
    },
    provinceCode: {
      type: String
    },
    cityCode: {
      type: String
    },
    areaCode: {
      type: String
    }
  },
  computed: {
    selectedText () {
      if (this.provinceCode && this.cityCode) {
        const province = this.provinceList.find(p => p.code === this.provinceCode)
        if (province) {
          const city = province.areaList.find(c => c.code === this.cityCode)
          if (city && this.level === 2) {
            return `${province.name} ${city.name}`
          } else {
            if (this.areaCode) {
              const area = city.areaList.find(a => a.code === this.areaCode)
              if (area && this.level === 3) {
                return `${province.name} ${city.name} ${area.name}`
              }
            }
          }
        }
      }
      return ''
    },
    list () {
      if (this.myProvinceCode && this.myCityCode) {
        const province = this.provinceList.find(p => p.code === this.myProvinceCode)
        const city = province.areaList.find(c => c.code === this.myCityCode)
        // 地区列表
        return city.areaList
      } else if (this.myProvinceCode && !this.myCityCode) {
        const province = this.provinceList.find(p => p.code === this.myProvinceCode)
        // 城市列表
        return province.areaList
      } else {
        // 省份列表
        return this.provinceList
      }
    }
  },
  data () {
    return {
      open: false,
      provinceList: [],
      myProvinceCode: '',
      myProvinceName: '',
      myCityCode: '',
      myCityName: '',
      myAreaCode: '',
      myAreaName: ''
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      if (!this.$root.provinceList) {
        const url = 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json'
        const { data } = await this.$http.get(url)
        this.$root.provinceList = data
        this.provinceList = data
      } else {
        this.provinceList = this.$root.provinceList
      }
    },
    handlerClose () {
      this.open = false
      this.myProvinceCode = ''
      this.myCityCode = ''
      this.myAreaCode = ''
    },
    toggleMenu () {
      if (this.open) {
        this.handlerClose()
      } else {
        this.open = true
      }
    },
    change (item) {
      const attrs = ['myProvince', 'myCity', 'myArea']
      this[`${attrs[item.level]}Code`] = item.code
      this[`${attrs[item.level]}Name`] = item.name
      // 二级地区
      if (this.level === 2 && this.myProvinceCode && this.myCityCode) {
        this.$emit('change', {
          provinceCode: this.myProvinceCode,
          cityCode: this.myCityCode,
          fullLocation: `${this.myProvinceName} ${this.myCityName}`
        })
        this.handlerClose()
      }
      // 三级地区
      if (this.level === 3 && this.myProvinceCode && this.myCityCode && this.myAreaCode) {
        this.$emit('change', {
          provinceCode: this.myProvinceCode,
          cityCode: this.myCityCode,
          areaCode: this.myAreaCode,
          fullLocation: `${this.myProvinceName} ${this.myCityName} ${this.myAreaName}`
        })
        this.handlerClose()
      }
    }
  }
}
</script>
